<script lang="ts" setup>
import {emojis} from "./utils/emojis";
const emit = defineEmits(["onChoose"]);

const onSendEmoticon = (type: any, value: any, img = "") => {
    if (img) {
        const imgSrcReg = /<img.*?src='(.*?)'/g;
        let match = imgSrcReg.exec(img);
        if (match) {
            emit("onChoose", {type, value, img: match[1]});
        }
    } else {
        emit("onChoose", {type, value, img});
    }
};
</script>
<template>
    <div class="options">
        <div
            v-for="(img, key) in emojis"
            v-html="img"
            :key="key"
            @click="onSendEmoticon(1, key, img)"
            class="option pointer"
        />
    </div>
</template>
<style lang="less" scoped>
.options {
    display: grid;
    grid-template-columns: repeat(14, 32px);
    grid-gap: 4px;
    .option {
        cursor: pointer;
        font-size: 24px;
        user-select: none;
        transition: all 0.5s;
        &:hover {
            transform: scale(1.5);
        }
    }
}
</style>
